import { NavBar, DatePicker} from 'antd-mobile'
import { useEffect, useMemo, useState} from 'react'
import classNames from 'classnames'
import { useSelector } from 'react-redux';
import dayjs from 'dayjs'
import './index.scss'
import lodash from 'lodash'
import DailyBill from '@/component/DailyBill.js';

const Month = () => {
   const [currentDate, setCurrentDate] = useState(() => dayjs().format('YYYY | MM'))
   const [datavisible, setDatavisible] = useState(false)
   const [currentMoothList,setCurrentMoothList] = useState([])
   const {billList}=useSelector(state => state.bill)
   

 //useMemo 相当于计算属性，只有当依赖项发生变化时才会重新计算
 const grouByDate = useMemo(() => {
    return lodash.groupBy(billList,(item)=>{
      return dayjs(item.date).format('YYYY | MM')
    })
  }, [billList])  
  //按日分组
  const dayGroup = useMemo(() => {
    const groupDay = lodash.groupBy(currentMoothList,item=>dayjs(item.date).format('YYYY-MM-DD'))
    const keys = Object.keys(groupDay)
    return {
      groupDay,
      keys
    }
  }, [currentMoothList])  
  //页面显示的数据
  const modelDate = useMemo(()=>{
    const pay = currentMoothList.filter(item=>item.type === 'pay').reduce((a,c)=>a + c.money,0)//收入
    const income = currentMoothList.filter(item=>item.type === 'income').reduce((a,c)=>a + c.money,0)//支出
    return {
      pay:lodash.round(pay,2),
      income:lodash.round(income,2),
      total:lodash.round(pay+income,2)
    }
  },[currentMoothList])
  //页面加载 初始化数据
  useEffect(()=>{
    let nowDate = '2024 | 05'
    setCurrentDate(nowDate)
    grouByDate[nowDate] && setCurrentMoothList(grouByDate[nowDate])
 },[grouByDate])
  //选定日期确认 回调函数
  const ConfirmDate = (date) => {
    const dateFormat = dayjs(date).format('YYYY | MM')
    setCurrentMoothList(grouByDate[dateFormat]||[])
    setCurrentDate(dateFormat)
  }
  
  return (
    <div className="monthlyBill">
      <NavBar className='nav' backIcon={false}>
        月度收支
      </NavBar>
      <div className="content">
        <div className="header">
          {/* 时间切换区域 */}
          <div className="date" onClick={()=>setDatavisible(true)}>
            <span className="text">
              {currentDate}月账单
            </span>
            <span className={classNames('arrow',{expand:datavisible})}></span>
          </div>
          {/* 统计区域 */}
          <div className='twoLineOverview'>
            <div className="item">
              <span className="money">{modelDate.income}</span>
              <span className="type">支出</span>
            </div>
            <div className="item">
              <span className="money">{modelDate.pay}</span>
              <span className="type">收入</span>
            </div>
            <div className="item">
              <span className="money">{modelDate.total}</span>
              <span className="type">结余</span>
            </div>
          </div>
          {/* 时间选择器 */}
          <DatePicker
            title="记账日期"
            precision="month"
            visible={datavisible}
            max={new Date()}
            onClose={() => {
              setDatavisible(false)
            }}
            onConfirm={val => ConfirmDate(val)}
          />
        </div>
        <div className='wrap-day-list'>
        {
          dayGroup.keys.map((item)=>{
             return (
               <DailyBill key={item} date={item} billList={dayGroup.groupDay[item]}></DailyBill>
             )
          })
        }
        </div>
      </div>
    </div >
  )
}

export default Month